<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Charcoal - Free Bootstrap 4 UI Kit</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>

        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">Charcoal</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="topMenu">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link page-scroll" href="#brand-colors">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="theme-components" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Components
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="theme-components">
                            <a class="dropdown-item page-scroll" href="#brand-colors">Brand colors</a>
                            <a class="dropdown-item page-scroll" href="#links">Links</a>
                            <a class="dropdown-item page-scroll" href="#grid">Grid</a>
                            <a class="dropdown-item page-scroll" href="#fonts">Fonts</a>
                            <a class="dropdown-item page-scroll" href="#buttons">Buttons</a>
                            <a class="dropdown-item page-scroll" href="#forms">Forms</a>
                            <a class="dropdown-item page-scroll" href="#dropdown">Dropdown</a>
                            <a class="dropdown-item page-scroll" href="#navs">Navs</a>
                            <a class="dropdown-item page-scroll" href="#navbar">Navbar</a>
                            <a class="dropdown-item page-scroll" href="#tables">Tables</a>
                            <a class="dropdown-item page-scroll" href="#pagination">Pagination</a>
                            <a class="dropdown-item page-scroll" href="#jumbotron">Jumbotron</a>
                            <a class="dropdown-item page-scroll" href="#cards">Cards</a>
                            <a class="dropdown-item page-scroll" href="#tooltip">Tooltip</a>
                            <a class="dropdown-item page-scroll" href="#popovers">Popovers</a>
                            <a class="dropdown-item page-scroll" href="#badges">Badges</a>
                            <a class="dropdown-item page-scroll" href="#modals">Modals</a>
                            <a class="dropdown-item page-scroll" href="#alerts">Alerts</a>
                            <a class="dropdown-item page-scroll" href="#progress-bars">Progress bars</a>
                            <a class="dropdown-item page-scroll" href="#list-group">List group</a>
                            <a class="dropdown-item page-scroll" href="#image-thumbnails">Image thumbnails</a>
                            <a class="dropdown-item page-scroll" href="#figures">Figures</a>
                            <a class="dropdown-item page-scroll" href="#breadcrumbs">Breadcrumbs</a>
                            <a class="dropdown-item page-scroll" href="#carousel">Carousel</a>
                            <a class="dropdown-item page-scroll" href="#close">Close icon</a>
                            <a class="dropdown-item page-scroll" href="#code">Code</a>
                        </div>
                    </li>
                </ul>
                <form class="form-inline ml-md-3">
                    <a href="#" class="btn btn-light">Download</a>
                </form>
            </div>
        </nav>

        <!--hero section-->
        <section class="bg-hero">
            <div class="container">
                <div class="row vh-100">
                    <div class="col-sm-12 my-auto text-center">
                        <h1>Charcoal</h1>
                        <p class="lead text-capitalize my-4">
                            A free Bootstrap 4 UI Kit made for quick customizations
                        </p>
                        <a href="https://themewagon.com/themes/free-app-ui-kit-charcoal" class="btn btn-outline-light btn-radius btn-lg">Free Download</a>
                    </div>
                </div>
            </div>
        </section>

        <!--components-->
        <section class="my-5 pt-5">
            <div class="container">
                <!-- Brand color  -->
                <div class="row my-5" id="brand-colors">
                    <div class="col-sm-12">
                        <h1>Brand colors</h1>

                        <div class="mt-3 mb-5">
                            <div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
                            <div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
                            <div class="p-2 mb-2 bg-success text-white">.bg-success</div>
                            <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
                            <div class="p-2 mb-2 bg-warning text-white">.bg-warning</div>
                            <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
                            <div class="p-2 mb-2 bg-light text-dark">.bg-light</div>
                            <div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
                            <div class="p-2 mb-2 bg-white text-dark">.bg-white</div>
                        </div>
                    </div>
                </div>

                <!-- Links  -->
                <div class="row mb-5" id="links">
                    <div class="col-sm-12">
                        <h1>Links</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6">
                                <h3>Default Link</h3>
                                <a href="javascript:void(0);">Exemple link</a>
                            </div>

                            <div class="col-sm-6">
                                <h3>Link inside an alert</h3>
                                <div class="alert alert-primary" role="alert">
                                    This is a primary alert with
                                    <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Grid  -->
                <div class="row mb-5" id="grid">
                    <div class="col-sm-12">
                        <h1>Grid</h1>

                        <div class="mt-4">
                            <!-- Bootstrap Grid -->
                            <div class="row bg-dark py-3">
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                                <div class="col-sm-1">.col-sm-1</div>
                            </div>
                            <div class="row bg-primary py-3">
                                <div class="col-sm-2">.col-sm-2</div>
                                <div class="col-sm-3">.col-sm-3</div>
                                <div class="col-sm-7">.col-sm-7</div>
                            </div>
                            <div class="row bg-info py-3">
                                <div class="col-sm-4">.col-sm-4</div>
                                <div class="col-sm-4">.col-sm-4</div>
                                <div class="col-sm-4">.col-sm-4</div>
                            </div>
                            <div class="row bg-success py-3">
                                <div class="col-sm-5">.col-sm-5</div>
                                <div class="col-sm-7">.col-sm-7</div>
                            </div>
                            <div class="row bg-secondary py-3">
                                <div class="col-sm-6">.col-sm-6</div>
                                <div class="col-sm-6">.col-sm-6</div>
                            </div>
                            <div class="row bg-primary py-3">
                                <div class="col-sm-12">.col-sm-12</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fonts  -->
                <div class="row mb-5" id="fonts">
                    <div class="col-sm-12">
                        <h1>Fonts</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h1>h1 </h1>
                                <h2>h2 </h2>
                                <h3>h3 </h3>
                                <h4>h4 </h4>
                                <h5>h5 </h5>
                                <h6>h6 </h6>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h1>Heading 1
                                    <small>Sub-heading</small>
                                </h1>
                                <h2>Heading 2
                                    <small>Sub-heading</small>
                                </h2>
                                <h3>Heading 3
                                    <small>Sub-heading</small>
                                </h3>
                                <h4>Heading 4
                                    <small>Sub-heading</small>
                                </h4>
                                <h5>Heading 5
                                    <small>Sub-heading</small>
                                </h5>
                                <h6>Heading 6
                                    <small>Sub-heading</small>
                                </h6>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h1 class="display-1">Display 1</h1>
                                <h1 class="display-2">Display 2</h1>
                                <h1 class="display-3">Display 3</h1>
                                <h1 class="display-4">Display 4</h1>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <p class="lead">
                                    This is the article lead — it stands out at the start of the article.
                                </p>

                                <p>
                                    This is normal text at the normal size etc...
                                </p>

                                <p>Sample
                                    <mark>marked text</mark>
                                    .
                                </p>
                                <blockquote class="blockquote">
                                    <p>The most important moment of your life is now. The most important person in your life is the one you are
                                        with now,
                                        and the most important activity in your life is the one you are involved with now.</p>
                                    <footer class="blockquote-footer">Someone famous in <cite>Dark Magic</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buttons  -->
                <div class="row mb-5" id="buttons">
                    <div class="col-sm-12">
                        <h1>Buttons</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Default buttons</h3>
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-light">Light</button>
                                <button type="button" class="btn btn-dark">Dark</button>
                                <button type="button" class="btn btn-link">Link</button>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Buttons with outline</h3>
                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-success">Success</button>
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-light">Light</button>
                                <button type="button" class="btn btn-outline-dark">Dark</button>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Buttons sizes</h3>
                                <button type="button" class="btn btn-secondary btn-sm">Small</button>
                                <button type="button" class="btn btn-secondary">Default</button>
                                <button type="button" class="btn btn-secondary btn-lg">Large</button>

                                <br><br/>

                                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Disabled button</h3>
                                <p>
                                    <a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a>
                                </p>

                                <p>
                                    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button>
                                </p>

                                <p>
                                    <input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element">
                                </p>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Checkbox buttons</h3>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary active">
                                        <input type="checkbox" checked="" autocomplete="off"> Boots
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="checkbox" autocomplete="off"> Shoes
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="checkbox" autocomplete="off"> Feet
                                    </label>
                                </div>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Radio buttons</h3>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="boots" autocomplete="off" checked=""> Boots
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="shoes" autocomplete="off"> Shoes
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="feet" autocomplete="off"> Feet
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Forms  -->
                <div class="row mb-5" id="forms">
                    <div class="col-sm-12">
                        <h1>Forms</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Default form</h3>
                                <form>
                                    <div class="form-group">
                                        <label for="exampleFormControlInput1">Email address</label>
                                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">Example select</label>
                                        <select class="form-control" id="exampleFormControlSelect1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect2">Example multiple select</label>
                                        <select multiple class="form-control" id="exampleFormControlSelect2">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleFormControlTextarea1">Example textarea</label>
                                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                    </div>
                                </form>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Vertical form</h3>
                                <form>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputEmail4">Email</label>
                                            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputPassword4">Password</label>
                                            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputAddress">Address</label>
                                        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputAddress2">Address 2</label>
                                        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputCity">City</label>
                                            <input type="text" class="form-control" id="inputCity">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="inputState">State</label>
                                            <select id="inputState" class="form-control">
                                                <option selected>Choose...</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label for="inputZip">Zip</label>
                                            <input type="text" class="form-control" id="inputZip">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox"> Check me out
                                            </label>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                </form>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Horizontal form</h3>
                                <form>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                        </div>
                                    </div>
                                    <fieldset class="form-group">
                                        <div class="row">
                                            <legend class="col-form-legend col-sm-2">Radios</legend>
                                            <div class="col-sm-10">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                                        Option one is this and that&mdash;be sure to include why it's great
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                                        Option two can be something else and selecting it will deselect option one
                                                    </label>
                                                </div>
                                                <div class="form-check disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                                        Option three is disabled
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <div class="form-group row">
                                        <div class="col-sm-2">Checkbox</div>
                                        <div class="col-sm-10">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="checkbox"> Check me out
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-10">
                                            <button type="submit" class="btn btn-primary">Sign in</button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Inline form</h3>
                                <form class="form-inline">
                                    <label class="sr-only" for="inlineFormInputName2">Name</label>
                                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">

                                    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
                                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                        <div class="input-group-addon">@</div>
                                        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
                                    </div>

                                    <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="checkbox"> Remember me
                                        </label>
                                    </div>

                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </form>

                                <br/><br/>
                                <h3>Form with help text </h3>

                                <div class="mt-3 mb-5">
                                    <label for="accountId">Account Id</label>
                                    <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
                                    <span id="helpAccountId"
                                          class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
                                </div>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Sizing</h3>
                                <form>
                                    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"><br/>
                                    <input class="form-control" type="text" placeholder="Default input"><br/>
                                    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"><br/>
                                    <select class="form-control form-control-lg">
                                        <option>Large select</option>
                                    </select><br/>
                                    <select class="form-control">
                                        <option>Default select</option>
                                    </select><br/>
                                    <select class="form-control form-control-sm">
                                        <option>Small select</option>
                                    </select>
                                </form>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Form validation</h3>
                                <form>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="validationServer01">First name</label>
                                            <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="validationServer02">Last name</label>
                                            <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="validationServer03">City</label>
                                            <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
                                            <div class="invalid-feedback">
                                                Please provide a valid city.
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label for="validationServer04">State</label>
                                            <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
                                            <div class="invalid-feedback">
                                                Please provide a valid state.
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label for="validationServer05">Zip</label>
                                            <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
                                            <div class="invalid-feedback">
                                                Please provide a valid zip.
                                            </div>
                                        </div>
                                    </div>

                                    <button class="btn btn-primary" type="submit">Submit form</button>
                                </form>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Custom forms</h3>
                                <form>
                                    <label class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">Check this custom checkbox</span>
                                    </label>
                                    <div class="custom-controls-stacked">
                                        <label class="custom-control custom-radio">
                                            <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
                                            <span class="custom-control-indicator"></span>
                                            <span class="custom-control-description">Toggle this custom radio</span>
                                        </label>
                                        <label class="custom-control custom-radio">
                                            <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
                                            <span class="custom-control-indicator"></span>
                                            <span class="custom-control-description">Or toggle this other custom radio</span>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <select class="custom-select">
                                            <option selected>Open this select menu</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="custom-file">
                                            <input type="file" id="file2" class="custom-file-input">
                                            <span class="custom-file-control"></span>
                                        </label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dropdown  -->
                <div class="row mb-5" id="dropdown">
                    <div class="col-sm-12">
                        <h1>Dropdown</h1>

                        <div class="row">
                            <div class="mt-3 mb-5 col-4">
                                <h3>Default dropdown</h3>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown button
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 mb-5 col-4">
                                <h3>Dropdown with menu</h3>
                                <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        About Us
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="about-us">
                                        <h6 class="dropdown-header">Company Information</h6>
                                        <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
                                        <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
                                        <h6 class="dropdown-header">Contact Us</h6>
                                        <a class="dropdown-item" href="javascript:void(0);">Call Center</a>
                                        <a class="dropdown-item" href="javascript:void(0);">Store Locations</a>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 mb-5 col-4">
                                <h3>Dropdown with divider</h3>
                                <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" id="about-us2" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        About Us
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="about-us2">
                                        <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
                                        <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:void(0);">Contact Us</a>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 mb-5 col-4">
                                <h3>Split button dropdown</h3>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">Split dropdown</button>
                                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Navs  -->
                <div class="row mb-5" id="navs">
                    <div class="col-sm-12">
                        <h1>Navs</h1>

                        <div class="row mt-4">

                            <div class="col-sm-6 pb-4">
                                <h3>Default nav</h3>
                                <ul class="nav">

                                    <li class="nav-item">
                                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">CSS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">Preview</a>
                                    </li>

                                </ul>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Horizontal menu</h3>
                                <nav class="nav flex-column">
                                    <a class="nav-link active" href="javascript:void(0);">HTML</a>
                                    <a class="nav-link" href="javascript:void(0);">CSS</a>
                                    <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                                    <a class="nav-link" href="javascript:void(0);">Preview</a>
                                </nav>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Nav with tabs</h3>
                                <ul class="nav nav-tabs">

                                    <li class="nav-item">
                                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">CSS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">Preview</a>
                                    </li>

                                </ul>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Nav with pills</h3>
                                <ul class="nav nav-pills">

                                    <li class="nav-item">
                                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">CSS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">Preview</a>
                                    </li>

                                </ul>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Horizontal nav with pills</h3>
                                <ul class="nav nav-pills flex-column">

                                    <li class="nav-item">
                                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">CSS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:void(0);">Preview</a>
                                    </li>

                                </ul>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Nav with tabs and dropdown</h3>
                                <ul id="clothing-nav" class="nav nav-tabs" role="tablist">

                                    <li class="nav-item">
                                        <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
                                           aria-expanded="true">Home</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Hats</a>
                                    </li>

                                    <!-- Dropdown -->
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button"
                                           aria-haspopup="true" aria-expanded="false">
                                            Footwear
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-toggle="tab"
                                               aria-controls="dropdownShoes">Shoes</a>
                                            <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-toggle="tab"
                                               aria-controls="dropdownBoots">Boots</a>
                                        </div>
                                    </li>

                                </ul>

                                <!-- Content Panel -->
                                <div id="clothing-nav-content" class="tab-content">

                                    <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
                                        <p>Welcome home! Click on the tabs to see the content change.</p>
                                    </div>

                                    <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
                                        <p>A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons,
                                            religious reasons,
                                            safety, or as a fashion accessory.</p>
                                    </div>

                                    <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">
                                        <p>A shoe is an item of footwear intended to protect and comfort the human foot while doing various
                                            activities. Shoes
                                            are also used as an item of decoration.</p>
                                    </div>

                                    <div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">
                                        <p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the foot and the ankle,
                                            while
                                            some also cover some part of the lower calf. Some boots extend up the leg, sometimes as far as the knee or
                                            even
                                            the hip.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Navbar  -->
                <div class="row mb-5" id="navbar">
                    <div class="col-sm-12">
                        <h1>Navbar</h1>

                        <div class="mt-3 mb-5">
                            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                <a class="navbar-brand" href="javascript:void(0);">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                    <ul class="navbar-nav mr-auto">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="javascript:void(0);">Home <span class="sr-only">(current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="javascript:void(0);">Link</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLight" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="navbarDropdownLight">
                                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                                            </div>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link disabled" href="javascript:void(0);">Disabled</a>
                                        </li>
                                    </ul>
                                    <form class="form-inline my-2 my-lg-0">
                                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                                    </form>
                                </div>
                            </nav>
                        </div>

                        <div class="mt-3 mb-5">
                            <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                                <a class="navbar-brand" href="javascript:void(0);">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                    <ul class="navbar-nav mr-auto">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="javascript:void(0);">Home <span class="sr-only">(current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="javascript:void(0);">Link</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLight" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="navbarDropdownLight">
                                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                                            </div>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link disabled" href="javascript:void(0);">Disabled</a>
                                        </li>
                                    </ul>
                                    <form class="form-inline my-2 my-lg-0">
                                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                                        <button class="btn btn-light my-2 my-sm-0" type="submit">Search</button>
                                    </form>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- Tables  -->
                <div class="row mb-5" id="tables">
                    <div class="col-sm-12">
                        <h1>Tables</h1>

                        <div class="mt-3 mb-5">
                            <h3>Default table</h3>
                            <div>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Header 1</th>
                                            <th>Header 2</th>
                                            <th>Header 3</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Footer 1</th>
                                            <th>Footer 2</th>
                                            <th>Footer 3</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>


                        <div class="mt-3 mb-5">
                            <h3>Table dark</h3>
                            <table class="table table-dark">
                                <thead>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                        <th>Header 3</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Footer 1</th>
                                        <th>Footer 2</th>
                                        <th>Footer 3</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <div class="mt-3 mb-5">
                            <h3>Table striped</h3>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                        <th>Header 3</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Footer 1</th>
                                        <th>Footer 2</th>
                                        <th>Footer 3</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <div class="mt-3 mb-5">
                            <h3>Table with border</h3>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                        <th>Header 3</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Footer 1</th>
                                        <th>Footer 2</th>
                                        <th>Footer 3</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3 mb-5">
                            <h3>Table with hover</h3>
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                        <th>Header 3</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Footer 1</th>
                                        <th>Footer 2</th>
                                        <th>Footer 3</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <div class="mt-3 mb-5">
                            <h3>Table with Head with dark color</h3>
                            <table class="table">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                        <th>Header 3</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Footer 1</th>
                                        <th>Footer 2</th>
                                        <th>Footer 3</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Pagination  -->
                <div class="row mb-5" id="pagination">
                    <div class="col-sm-12">
                        <h1>Pagination</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">1</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">2</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">3</a>
                                        </li>
                                        <li class="page-item active">
                                            <a href="javascript:void(0);" class="page-link">4</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">5</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">6</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">7</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">1</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">2</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">3</a>
                                        </li>
                                        <li class="page-item active">
                                            <a href="javascript:void(0);" class="page-link">4</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">5</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">6</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">7</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <nav>
                                    <ul class="pagination pagination-lg">
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">1</a>
                                        </li>
                                        <li class="page-item active">
                                            <a href="javascript:void(0);" class="page-link">2</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">3</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">4</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">5</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">6</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">7</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">1</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">2</a>
                                        </li>
                                        <li class="page-item active">
                                            <a href="javascript:void(0);" class="page-link">3</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">4</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">5</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">6</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">7</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <nav>
                                    <ul class="pagination pagination-sm">
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">1</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">2</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">3</a>
                                        </li>
                                        <li class="page-item active">
                                            <a href="javascript:void(0);" class="page-link">4</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">5</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">6</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link">7</a>
                                        </li>
                                        <li class="page-item">
                                            <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Jumbotron  -->
                <div class="row mb-5" id="jumbotron">
                    <div class="col-sm-12">
                        <h1>Jumbotron</h1>

                        <div class="container">
                            <div class="jumbotron">
                                <h1>Container size jumboton</h1>
                                <p>Think BIG with a Bootstrap Jumbotron!</p>
                            </div>
                        </div>

                        <div class="jumbotron jumbotron-fluid">
                            <div class="container">
                                <h1>Container fluid size jumbotron</h1>
                                <p>Think BIG with a Bootstrap Jumbotron!</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cards  -->
                <div class="row mb-5" id="cards">
                    <div class="col-sm-12">
                        <h1>Cards</h1>
                        <div class="row mb-3">
                            <div class="col-3">
                                <div class="card card-body">
                                    <h4 class="card-title">Boot Polish</h4>
                                    <p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof
                                        leather shoes or boots to extend
                                        the footwear's life, and restore, maintain and improve their appearance.</p>
                                    <a href="javascript:void(0);" class="btn btn-primary">More</a>
                                </div>
                            </div>

                            <div class="col-3">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title">Sun Gone</h4>
                                        <p class="card-text">Here are the top resources for all things related to the Sun.</p>
                                        <a href="javascript:void(0);" class="card-link">Sun Gone</a>
                                        <a href="javascript:void(0);" class="card-link">Still Gone</a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-3">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h4 class="card-title">Sun Gone</h4>
                                        <h6 class="card-subtitle text-muted">Sun disappears!</h6>
                                    </div>
                                    <img src="https://via.placeholder.com/300x150" alt="Photo of sunset">

                                    <div class="card-body">
                                        <p class="card-text">The sun disappeared behind the horizon today. Experts claim it could be gone for
                                            good!</p>
                                        <a href="javascript:void(0);" class="btn btn-primary">Full Report</a>
                                    </div>

                                </div>
                            </div>

                            <div class="col-3">
                                <div class="card">
                                    <div class="card-header">
                                        Sponsored Content
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title">Ugg Boots</h4>
                                        <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
                                    </div>
                                    <div class="card-footer">
                                        By boots.com
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="card-group">
                                    <div class="card">
                                        <div class="card-header">Sun Gone</div>
                                        <div class="card-body">
                                            <p class="card-text">The top resources for all things related to the Sun.</p>
                                            <a href="javascript:void(0);" class="card-link">Sun Gone</a>
                                            <a href="javascript:void(0);" class="card-link">Still Gone</a>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">Sun Up</div>
                                        <div class="card-body">
                                            <p class="card-text">Looks like the Sun has returned. Here's
                                                <a href="javascript:void(0);" class="card-link">why</a>.</p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Tooltip  -->
                <div class="row mb-5" id="tooltip">
                    <div class="col-sm-12">
                        <h1>Tooltip</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Inline tooltip</h3>
                                <p>
                                    Check out my
                                    <a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title=""
                                       data-original-title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you
                                    might need it!</p>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>All position tooltip</h3>
                                <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title=""
                                        style="margin:20px;" data-original-title="Top shoes">
                                    Shoes
                                </button>
                                <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title=""
                                        style="margin:20px;" data-original-title="Right boot">
                                    Boots
                                </button>
                                <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title=""
                                        style="margin:20px;" data-original-title="Bottom uggs">
                                    Ugg
                                </button>
                                <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title=""
                                        style="margin:20px;" data-original-title="Left sock">
                                    Socks
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Popovers  -->
                <div class="row mb-5" id="popovers">
                    <div class="col-sm-12">
                        <h1>Popovers</h1>
                        <div class="mt-3 mb-5">
                            <h3>All popover position</h3>
                            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title=""
                                    title="">
                                Popover on top
                            </button>

                            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                                    data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                                    data-original-title="" title="">
                                Popover on right
                            </button>

                            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                                    data-placement="bottom" data-content="Vivamus
                                    sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
                                Popover on bottom
                            </button>

                            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                                    data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                                    data-original-title="" title="">
                                Popover on left
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Badges  -->
                <div class="row mb-5" id="badges">
                    <div class="col-sm-12">
                        <h1>Badges</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Badge heading</h3>
                                <h1>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h1>
                                <h2>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h2>
                                <h3>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h3>
                                <h4>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h4>
                                <h5>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h5>
                                <h6>Example heading
                                    <span class="badge badge-secondary">New</span>
                                </h6>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Button with inline badge</h3>
                                <button type="button" class="btn btn-primary">
                                    Notifications
                                    <span class="badge badge-light">4</span>
                                </button>
                                <button type="button" class="btn btn-primary">
                                    Profile
                                    <span class="badge badge-light">9</span>
                                    <span class="sr-only">unread messages</span>
                                </button>
                                <br/><br/>
                                <h3>Default badges</h3>
                                <span class="badge badge-primary">Primary</span>
                                <span class="badge badge-secondary">Secondary</span>
                                <span class="badge badge-success">Success</span>
                                <span class="badge badge-danger">Danger</span>
                                <span class="badge badge-warning">Warning</span>
                                <span class="badge badge-info">Info</span>
                                <span class="badge badge-light">Light</span>
                                <span class="badge badge-dark">Dark</span>
                                <br/><br/>
                                <h3>Badges pill</h3>
                                <span class="badge badge-pill badge-primary">Primary</span>
                                <span class="badge badge-pill badge-secondary">Secondary</span>
                                <span class="badge badge-pill badge-success">Success</span>
                                <span class="badge badge-pill badge-danger">Danger</span>
                                <span class="badge badge-pill badge-warning">Warning</span>
                                <span class="badge badge-pill badge-info">Info</span>
                                <span class="badge badge-pill badge-light">Light</span>
                                <span class="badge badge-pill badge-dark">Dark</span>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Badges with link</h3>
                                <a href="javascript:void(0);" class="badge badge-primary">Primary</a>
                                <a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>
                                <a href="javascript:void(0);" class="badge badge-success">Success</a>
                                <a href="javascript:void(0);" class="badge badge-danger">Danger</a>
                                <a href="javascript:void(0);" class="badge badge-warning">Warning</a>
                                <a href="javascript:void(0);" class="badge badge-info">Info</a>
                                <a href="javascript:void(0);" class="badge badge-light">Light</a>
                                <a href="javascript:void(0);" class="badge badge-dark">Dark</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modals  -->
                <div class="row mb-5" id="modals">
                    <div class="col-sm-12">
                        <h1>Modals</h1>

                        <div class="mt-3 mb-5 row">
                            <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                                    data-target="#flipFlop">
                                Default Modal
                            </button>

                            <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                                    data-target="#largeShoes">
                                Large Modal
                            </button>

                            <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                                    data-target="#smallShoes">
                                Small Modal
                            </button>

                            <!-- The modal -->
                            <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall"
                                 aria-hidden="true" style="display: none;">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            Small shoes are typically worn by people with small feet.
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!-- The modal -->
                            <div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge"
                                 aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            Large shoes are usually avoided by people with small feet.
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!-- The modal -->
                            <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            A type of open-toed sandal.
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alerts  -->
                <div class="row mb-5" id="alerts">
                    <div class="col-sm-12">
                        <h1>Alerts</h1>

                        <div class="mt-3 mb-5">
                            <h3>Default alert</h3>
                            <div class="alert alert-success" role="alert">Success alert</div>
                            <div class="alert alert-info" role="alert">Info alert</div>
                            <div class="alert alert-warning" role="alert">Warning alert</div>
                            <div class="alert alert-danger" role="alert">Danger alert</div>
                            <div class="alert alert-light" role="alert">Light alert</div>
                            <div class="alert alert-dark" role="alert">Dark alert</div>
                        </div>

                        <div class="mt-3 mb-5">
                            <h3>Dismissible alert</h3>
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <strong>Congratulations!</strong> You successfully tied your shoelace!
                            </div>
                        </div>

                        <div class="mt-3 mb-5">
                            <h3>Dismissible alert with fade</h3>
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <strong>Congratulations!</strong> You successfully tied your shoelace!
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress bars  -->
                <div class="row mb-5" id="progress-bars">
                    <div class="col-sm-12">
                        <h1>Progress bars</h1>

                        <div class="mt-3 mb-5">
                            <h3>Default Progress bar</h3>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                        </div>

                        <div class="mt-3 mb-5">
                            <h3>Striped Progress bar </h3>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
                                     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%"
                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%"
                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                        <div class="mt-3 mb-5">
                            <h3>Animated Progress bar</h3>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- List group  -->
                <div class="row mb-5" id="list-group">
                    <div class="col-sm-12">
                        <h1>List group</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Default list group</h3>
                                <ul class="list-group">
                                    <li class="list-group-item">These Boots Are Made For Walking</li>
                                    <li class="list-group-item">Eleanor, Put Your Boots On</li>
                                    <li class="list-group-item">Puss 'n' Boots</li>
                                    <li class="list-group-item">Die With Your Boots On</li>
                                    <li class="list-group-item">Fairies Wear Boots</li>
                                </ul>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>List group with pills</h3>
                                <ul class="list-group">
                                    <li class="list-group-item justify-content-between">
                                        These Boots Are Made For Walking
                                        <span class="badge badge-secondary badge-pill">15</span>
                                    </li>
                                    <li class="list-group-item justify-content-between">
                                        Eleanor, Put Your Boots On
                                        <span class="badge badge-secondary badge-pill">38</span>
                                    </li>
                                    <li class="list-group-item justify-content-between">
                                        Puss 'n' Boots
                                        <span class="badge badge-secondary badge-pill">76</span>
                                    </li>
                                    <li class="list-group-item justify-content-between">
                                        Die With Your Boots On
                                        <span class="badge badge-secondary badge-pill">112</span>
                                    </li>
                                    <li class="list-group-item justify-content-between">
                                        Fairies Wear Boots
                                        <span class="badge badge-secondary badge-pill">181</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Link List group</h3>
                                <div class="list-group">
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are Made For
                                        Walking</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots
                                        On</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots On</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
                                </div>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Button List group</h3>
                                <div class="list-group">
                                    <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button>
                                    <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On
                                    </button>
                                    <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
                                    <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button>
                                    <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
                                </div>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>List group with colors</h3>
                                <div class="list-group">
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success">These
                                        Boots Are Made For Walking</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success active">Eleanor,
                                        Put Your Boots On</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-info">Puss 'n'
                                        Boots</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-warning">Die With
                                        Your Boots On</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-danger">Fairies
                                        Wear Boots</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-light">Head Over
                                        Boots</a>
                                    <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-dark">Boot
                                        Scootin' Boogie</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image thumbnails  -->
                <div class="row mb-5" id="image-thumbnails">
                    <div class="col-sm-12">
                        <h1>Image thumbnails </h1>

                        <div>
                            <img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">
                            <img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">
                            <img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">
                            <img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">
                        </div>
                    </div>
                </div>

                <!-- Figures  -->
                <div class="row mb-5" id="figures">
                    <div class="col-sm-12">
                        <h1>Figures</h1>

                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <figure class="figure">
                                    <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
                                         alt="A generic square placeholder image with rounded corners in a figure.">
                                    <figcaption class="figure-caption">A caption for the above image.</figcaption>
                                </figure>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <figure class="figure">
                                    <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
                                         alt="A generic square placeholder image with rounded corners in a figure.">
                                    <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Breadcrumbs  -->
                <div class="row mb-5" id="breadcrumbs">
                    <div class="col-sm-12">
                        <h1>Breadcrumbs</h1>

                        <div>
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0);">Home</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0);">Fruit</a>
                                </li>
                                <li class="breadcrumb-item active">Pears</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Carousel  -->
                <div class="row mb-5" id="carousel">
                    <div class="col-sm-12">
                        <h1>Carousel</h1>

                        <div class="mt-4">
                            <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                                    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                                    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">
                                        <div class="carousel-caption">
                                            <h3>First slide</h3>
                                            <p>This is the first slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Second slide">
                                        <div class="carousel-caption">
                                            <h3>Second slide</h3>
                                            <p>This is the second slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">
                                        <div class="carousel-caption">
                                            <h3>Third slide</h3>
                                            <p>This is the third slide.</p>
                                        </div>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Close  -->
                <div class="row mb-5" id="close">
                    <div class="col-sm-12">
                        <h1>Close icon</h1>
                        <div class="d-flex mr-auto ml-5">
                            <button type="button" class="close" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Code -->
                <div class="row mb-5" id="code">
                    <div class="col-sm-12">
                        <h1>Code</h1>
                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4">
                                <h3>Default code</h3>
                                For example,
                                <code>&lt;section&gt;</code> should be wrapped as inline.
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Code with pre tag</h3>
                                <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
                            </code></pre>
                            </div>


                            <div class="col-sm-6 pb-4">
                                <h3>Var tag</h3>
                                <var>y</var> =
                                <var>m</var>
                                <var>x</var> +
                                <var>b</var>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Kbd tag</h3>
                                To switch directories, type
                                <kbd>cd</kbd> followed by the name of the directory.
                                <br> To edit settings, press
                                <kbd>
                                    <kbd>ctrl</kbd> +
                                    <kbd>,</kbd>
                                </kbd>
                            </div>

                            <div class="col-sm-6 pb-4">
                                <h3>Samp tag</h3>
                                <samp>This text is meant to be treated as sample output from a computer program.</samp>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <!-- <h3>Upgrade to Pro Version</h3>
                        <p class="pt-2">
                            We are working on <b>Charcoal Pro</b> which will be released soon. The pro version 
                            will have a lot more components, sections, icons, plugins and example pages. 
                            Join the waiting list to get notified when we release it (plus discount code).
                        </p>
                        <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                        <hr class="my-5"/> -->
                        <p class="pt-2 text-muted">
                            &copy; 2018 Charcoal Theme. A free Bootstrap 4 UI kit by 
                            <a href="#">Wired Dots</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </p>
                        <p class="small">
                            <a rel="nofollow" target="_blank" href="https://unsplash.com/photos/RbCqa2uAYq4">Photo</a> by <a rel="nofollow" target="_blank" href="https://unsplash.com/@mvdheuvel">Maarten van den Heuvel</a> on <a rel="nofollow" target="_blank" href="https://unsplash.com">Unsplash</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
